<template>
    <div class="app-container">
        <div class="salaryBox">
            <el-card>
                <div slot="header">
                    <h3>工资管理</h3>
                </div>
                <template>
                    <el-table :data="salaryList" stripe>
                        <el-table-column prop="jobId" label="岗位ID"></el-table-column>
                        <el-table-column prop="jobName" label="岗位名称"></el-table-column>
                        <el-table-column prop="studentId" label="学号"></el-table-column>
                        <el-table-column prop="studentName" label="学生姓名"></el-table-column>
                        <el-table-column prop="workHour" label="工作时长"></el-table-column>
                        <el-table-column prop="paymentAmount" label="薪资情况"></el-table-column>
                        <el-table-column prop="paymentTime" label="发放日期"></el-table-column>
                        <el-table-column prop="remarks" label="备注"></el-table-column>
                        <el-table-column label="操作" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="success" @click="sendsalary(scope.row)" :disabled="scope.row.disabled"
                                    icon="el-icon-check">{{ scope.row.disabled ? '已发放' : '发放' }}</el-button>
                            </template>
                            <!-- <template slot-scope="scope">
                                <el-button type="success" @click="sendsalary(scope.row)" :disabled="isDisabled"
                                    icon="el-icon-check">发放</el-button>
                            </template> -->
                        </el-table-column>
                    </el-table>
                </template>
            </el-card>

        </div>
    </div>
</template>


<script>
import jobApi from '@/api/job'
export default {
    name: "Salary",
    data() {
        return {
            // filterForm: {
            //     studentName: "",
            //     studentId: "",
            //     jobName: ""
            // },
            salaryList: [],
            // 按钮状态
            // isDisabled: false
        };
    },
    mounted() {
        // 获取工资列表数据
        this.getSalaryList();
    },
    methods: {
        // 获取工资列表数据
        getSalaryList() {
            // 调用后端API获取工资列表数据
            jobApi.salaryPayment().then(res => {
                    // console.log("salaryInformation", res)
                    this.salaryList = res.data.item
                    console.log("salaryInformation", this.salaryList)
                })
                .catch(error => {
                    console.log(error)
                })
            // 模拟数据
            // this.salaryList = [
            //     { date: '2023-2-28', studentName: '张三', studentId: '2018001', jobName: '图书馆管理员', jobId: '001', workHours: 80, salary: 1600,remarks:'无', disabled: false },
            //     { date: '2023-2-28', studentName: '李四', studentId: '2018002', jobName: '实验室助理', jobId: '002', workHours: 90, salary: 1800,remarks:'无', disabled: false },
            //     { date: '2023-2-28', studentName: '王五', studentId: '2018003', jobName: '教学辅助员', jobId: '003', workHours: 70, salary: 1400, remarks:'无',disabled: false }
            // ];
        },
        sendsalary(row) {
            this.$message.success('发放成功');
            row.disabled = true
            // console.log(11111, row)
        },

    }
}
</script>

<style >
.salaryBox {
    border-radius: 50px;
    background: #e0e0e0;
    box-shadow: 20px 20px 60px #bebebe,
        -20px -20px 60px #ffffff;
}
</style>

